<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>车流量统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">选项1</a>
                                </li>
                                <li><a href="#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-bar-chart"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">

        <div class="col-sm-12 select-table table-striped">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>报警统计</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">选项1</a>
                            </li>
                            <li><a href="#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-pie-chart"></div>
                </div>
            </div>
        </div>




    </div>


</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title : {
                text: '车流量统计(辆)'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['车流量(辆)']
            },
            grid:{
                x:30,
                x2:40,
                y2:24
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data : ['2022/01/01','2022/01/02','2022/01/03','2022/01/04','2022/01/05','2022/01/06','2022/01/07','2022/01/08','2022/01/09'
                        ,'2022/01/10','2022/01/11','2022/01/12','2022/01/13','2022/01/14','2022/01/15','2022/01/16','2022/01/17','2022/01/18'
                        ,'2022/01/19','2022/01/20','2022/01/21','2022/01/22','2022/01/23','2022/01/24','2022/01/25','2022/01/26','2022/01/27'
                        ,'2022/01/28','2022/01/29','2022/01/30','2022/01/31']
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                {
                    name:'车流量(辆)',
                    type:'bar',
                    data:[2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2,2, 5, 9, 26, 28, 70, 175, 182, 48, 18, 6, 2,2, 5, 9, 26, 28, 70, 175],
                    color:'#3c8dbc',
                    markLine : {
                        data : [
                            {type : 'average', name : '平均值'}
                        ]
                    }
                }
            ]
        };
        barChart.setOption(baroption);
        window.onresize = barChart.resize;

        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        var pieoption = {
            title : {
                text: '报警统计',
                subtext: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['七里屯出城卡口','七里屯进城卡口','八里出城卡口','八里进城卡口','农校出城卡口','农校进城卡口']
            },
            calculable : true,
            series : [
                {
                    name:'卡口报警统计(辆)',
                    type:'pie',
                    radius : '60%',
                    center: ['50%', '60%'],
                    data:[
                        {value:215, name:'七里屯出城卡口'},
                        {value:335, name:'七里屯进城卡口'},
                        {value:52, name:'八里出城卡口'},
                        {value:330, name:'八里进城卡口'},
                        {value:500, name:'农校出城卡口'},
                        {value:100, name:'农校进城卡口'}
                    ]
                }
            ]
        };
        pieChart.setOption(pieoption);
        $(window).resize(pieChart.resize);
    });
</script>
</body>
</html>